<div class="center-screen">
    <form name="confirmForm" method="post" action="register" ng-controller="confirmController">
        <div class="app-section-register">
            <div class="confirm_form">
                <div id="StepsRegistration" class="wizard">
                    <ul class="steps">
                        <li data-target="#step1" class="active"><span class="badge badge-info">1</span>
                            Secret Question
                            <span class="chevron"></span></li>
                        <li data-target="#step2"><span class="badge">2</span>Information<span class="chevron"></span>
                        </li>
                        <li data-target="#step3"><span class="badge">3</span>Finish<span class="chevron"></span></li>
                    </ul>
                </div>
                <div class="step-content">
                    <div class="step-pane active" id="step1">
                        <label>Choose your secret question</label>
                        <div class="input-group">
                            <input type="text" name="question" id="question" />
                            <div class="input-group-btn">
                                <button type="button" class="btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                <ul class="dropdown-menu pull-right" id="secret-question">
                                    <li ng-repeat="question in questions" class="secret-question"">
                                        {{ question.question }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <label>Answer</label>
                        <input type="text" class="app-answer" name="answer"/>
                        <button type="button" id="next-step-1" class="btn-success">Next</button>
                    </div>
                    <div class="step-pane" id="step2">
                        <div class="form-group">
                            <label>Language</label>
                            <select id="language" class="combobox form-control" name="language">
                                <option ng-repeat="language in languages" value="{{ language.id }}">
                                    {{ language.name }}
                                </option>
                            </select>
                            <label>Country</label>
                            <select id="country" class="combobox form-control" name="country">
                                <option ng-repeat="country in countries" value="{{ country.id }}">
                                    {{ country.name }}
                                </option>
                            </select>
                            <button type="button" class="btn-success" id="next-step-2">Next</button>
                            <label>Nice, <strong id="prev-step-2">previous</strong> if it was a mistake.</label>
                        </div>
                    </div>
                    <div class="step-pane" id="step3">
                        <label class="app-congratulation">Congratulation!</label><br>
                        <label>Nice, <strong id="prev-step-3">previous</strong> if it was a mistake</label><br>
                        <button type="button" class="btn-success">
                            Get started !
                            <span class="glyphicon glyphicon-play"></span>
                        </button>
                    </div>
                    <input ng-model="finish" type="hidden" name="finish" value="1"/>
                </div>
            </div>
        </div>
    </form>
</div>